<template>
	<view class="work-detail">
		<view class="top-content pos-rel">
			<view class="title-header">
				<!-- <text style="font-weight: 600;">工种：</text> -->
				{{ form.recruit_type_work }}
			</view>
			<uni-swiper-dot v-if="form.recruit_pic != ''" :info="form.recruit_pic" field="content" mode="round"
				@change="changImg" :current="imgCurrent">
				<swiper class="swiper" v-if="form.recruit_pic != ''" @change="changImg" :current="imgCurrent">
					<swiper-item v-for="(item, index) in form.recruit_pic" :key="index">
						<view class="swiper-item uni-bg-red swiper-item-content">
							<image :src="item.images_url" v-if="item.images_file_type == 'image'" mode="aspectFill"
								style="width: 100%;" @click="getPhotoClickIdx"></image>
							<video :src="item.images_url" autoplay="true" loop="true" v-else controls></video>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- <view class="flex-row">
			<view class="small_img" v-if="form.recruit_pic != ''" :key="index" v-for="(item, index) in form.recruit_pic">
				<image class="small_item" :src="item.images_url" :class="{ active: imgCurrent === index }" @click="chooseImg(index)"
				 mode="widthFix" style="width: 100%;" v-if="item.images_file_type == 'image'"></image>
				<video :src="item.images_url" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="false"
				 :class="{ active: imgCurrent === index }" class="small_item" style="object-position: inherit;object-fit: contain;"
				 loop="true" v-else></video>
			</view>
		</view> -->
		<view class="work-content">

			<view class="replenish_info" style="color: red; font-size: 20px;font-weight: bold;">
				<!-- <text style="font-weight: 600;">工作内容补充：</text> -->
				<text>{{form.recruit_content || '' }}</text>
			</view>

		</view>
		<view class="work-content">
			<view class="top left-line"><text class="larger">工作描述</text></view>

			<view class="info">
				<!-- <text style="font-weight: 600;">工作内容：</text> -->
				<text>{{ form.recruit_requirement || ''  }}</text>
			</view>
			<!-- 			<view class="replenish_info">
				<text>{{form.content || '' }}</text>
			</view> -->

			<!-- <view class="title">
				<text style="font-weight: 600;">开工时间：</text>
				{{ form.recruit_start_time }}
			</view> -->
		</view>
		<view class="work-address people">
			<view class="title  left-line larger">当前申请({{ form.recruit_user_num|| ''  }}人)</view>
			<view class="imgArr flex" v-if="form.recruit_user_num">
				<image class="headImg" v-for="(item, index) in form.recruit_user" :key="index" :src="item.avatarUrl"
					mode="widthFix"></image>
			</view>
		</view>
		<view>
			<view class="top left-line larger">工作地点</view>
			<view class="flex address" @click="getMap">
				<view class="info">{{form.recruit_area || '' + '  '}}{{ form.recruit_address || '' }}</view>
				<view class="more">查看详情 ></view>
			</view>
			<view class="" @click="getMap">
				<map style="width:100%;height:250upx;" :markers="covers" :latitude="form.recruit_latitude"
					:longitude="form.recruit_longitude"></map>
			</view>
		</view>
		<view class="publish-info">
			<view class="top left-line">发布人信息</view>
			<view class="flex">
				<image class="headImg" :src="form.avatarUrl" mode="widthFix"></image>
				<view class="info">
					<view class="">{{form.nickname}}</view>

					<view class="">
						<text>联系电话 </text>
						<text v-if="!form.is_receiving" style="margin-left: 20upx">xxxxxxx(报名即可查看)</text>
						<text v-else style="margin-left: 20upx">{{form.recruit_link_tel}}</text>
					</view>

				</view>
			</view>
		</view>
		<view class="statement">
			<view class="top left-line">免责声明</view>
			<view class="content">
				本平台对各种违法信息或可能违法信息一律下架。但是我们甄别能力有限，有一些信息真假任然无从判断。请提高警惕，谨防上当。
			</view>
			<!-- <view class="bottom">
				我也是有底线的啦~
				<text class="green">点击查看其它招聘信息</text>
				~
			</view> -->
		</view>
		<view class="right-pop" v-if="show">
			<view class="arrow"></view>
			"转发给朋友"
			<br />
			推荐有
			<text class="red">奖</text>
			<u-icon class="close" name="close" @click="show = false"></u-icon>
		</view>
		<uni-footer :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable @close="closePop">
			<view class="d-login-btn">
				<template v-if="step == 1">
					<u-button class="d-btn" type="primary" shape="circle" open-type="getUserInfo"
						@getuserinfo="getuserinfo" :custom-style="customStyle2">登录授权</u-button>
				</template>
				<template v-if="step == 2">
					<u-button class="d-btn" type="primary" shape="circle" open-type="getPhoneNumber"
						@getphonenumber="getphonenumber" :custom-style="customStyle2">
						授权手机号
					</u-button>
				</template>
			</view>
		</u-popup>

		<!-- 测试 -->
		<my-canvas class="canvas-wrap" v-if="showCanvas" :codeUrl="codeImgs" :data="canvasObj"></my-canvas>

	</view>
</template>

<script>
	import Wxml2Canvas from 'wxml2canvas';
	import {
		formatYmdhm
	} from '@/common/filter.js';
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	import myCanvas from './canvas.vue'
	import {
		newFileImgeUrl
	} from '@/common/config.js'
	export default {
		name: 'workDetail', // 工作明细
		data() {
			return {
				codeImgs: '',
				showCanvas: false,
				canvasObj: {},
				show: false,
				role: uni.getStorageSync('role'),
				height: 0,
				ID: '',
				covers: [],
				indicatorDots: true,
				recruit_id: '',
				customStyle: {
					background: '#E04110',
					border: 'none',
					color: '#fff'
				},
				videoSrc: 'https://yzr2020-1258429991.cos.ap-nanjing.myqcloud.com/video/videos.mp4',
				imgArr: ['../../static/image/share.jpg', '../../static/image/bg.png'],
				imgCurrent: 0,
				form: {
					avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/3aybvew99NPia64TBR4ow3vxMIVcfepq0ZeWQd1sauquZPc4ZNYdDsnMYg9SGDolpflkHCZCzZib00vIfBuvs41g/132",
					balance: 0,
					create_time: 1606361071,
					employer_order: null,
					id: 0,
					is_receiving: false,
					is_retransmission: 0,
					nickname: "",
					phone: "",
					recommend_uid: 0,
					recruit_address: "",
					recruit_create_time: 1607566160,
					recruit_end_time: null,
					recruit_id: '',
					recruit_latitude: "",
					recruit_link_tel: "",
					recruit_longitude: "",
					recruit_number: "",
					recruit_people_number: 0,
					recruit_requirement: "",
					recruit_salary: "",
					recruit_share_num: 0,
					recruit_start_time: "2020-12-11 09:30:00",
					recruit_status: 0,
					recruit_type_work: "",
					recruit_types: 1,
					recruit_uid: 0,
					recruit_user: [],
					recruit_user_num: 0,
					update_time: 1606361071,
					worker_order: null,
					recruit_content:''
				},
				people: {
					num: 20,
					arr: ['../../static/image/pay.png', '../../static/image/pay.png', '../../static/image/pay.png']
				},
				recruit: [{
						title: '招募网络数据整理员',
						address: '北京但事实上',
						distance: '200km',
						time: '18小时之前',
						time_section: '12-01--12-05',
						money: '120-160/天',
						type: '协助'
					},
					{
						title: '招募网络数据整理员',
						address: '北京但事实上',
						distance: '200km',
						time: '18小时之前',
						money: '120-160/天',
						time_section: '',
						type: '厂区物',
						top: true
					}
				],
				customStyle2: {
					background: '#5650ee'
				},
				options: [
					// {
					// 	icon: 'home'
					// },
					// {
					// 	icon: 'weixin'
					// }
				],
				buttonGroup: [],
				step: 1,
				row: uni.getStorageSync('row')
			};
		},
		onLoad(e) {
			console.log(e)
			this.form.id = e.recruit_id;
			this.recruit_id = e.recruit_id;
			this.ID = e.id
			this.getDetail();

			if (this.ID == 0 && this.recruit_id > 0) {
				this.buttonGroup =[]
				this.buttonGroup.push(

					{
						text: '回到首页',
						backgroundColor: '#fff',
						color: '#000',
						show: uni.getStorageSync('role') != 'small'
					}, {
						text: '“获取详细代理信息”（获取联系方式）',
						backgroundColor: '#E04110',
						color: '#fff',
						show: true
					}
				)

			} else {
				this.buttonGroup =[]
				this.buttonGroup.push(
				
					{
						text: '回到首页',
						backgroundColor: '#fff',
						color: '#000',
						show: uni.getStorageSync('role') != 'small'
					}, {
						text: '已经代理该项目',
						backgroundColor: 'green',
						color: '#fff',
						show: true
					},
				)
			}
			

		},
		onReady() {
			//swiper高度自适应
			// this.getElementHeight('.swiper-item-content')

		},
		components: {
			uniSwiperDot,
			myCanvas
		},


		methods: {
			// 图片预览
			imgPreview(list, idx) {
				console.log(list)
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容
						urls: list
					});
				}
			},
			// 获得相册 idx
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
				let imgs = [];
				_this.form.recruit_pic.forEach(function(value, key) {
					if (value.images_file_type == 'image') {
						imgs.push(value.images_url)
					}
				});

				// for(_this.form.recruit_pic of item){
				// 	if(item.images_file_type == 'image'){
				// 		imgs.push(item.imageUrl)
				// 	}
				// }
				_this.imgPreview(imgs, idx);
			},
			getElementHeight(element) {
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect();
					query.exec((res) => {
						console.log(res[0].height)
						if (!res || res[0].length == 0) { //如果没获取到，再调一次
							this.getElementHeight();
						} else {
							this.height = res[0].height;
						}
					})
				}, 100)
			},
			getDetail() {
				console.log(this.recruit_id, this.ID)
				let datya
				if (this.role == 'samll' || this.role == 'big' || (this.recruit_id > 0 && this.ID == 0)) {
					datya = this.$u.api.postGetActivityInfo({
						id: this.recruit_id,
						userId: uni.getStorageSync('userId')
					})
				} else {
					datya = this.$u.api.getIntermediaryRecruitInfo({
						id: this.ID,
						// userId: uni.getStorageSync('userId')
					})
				}
				datya.then(res => {
					if (res.data) {

						this.form = res.data;
						this.getCurrentSwiperHeight('.swiper-item-content');
						this.covers = [{
							latitude: res.data.recruit_latitude,
							longitude: res.data.recruit_longitude,
							iconPath: '../../static/image/poi_3.png',
							width: "24",
							height: "33"
						}]
					} else {
						return uni.showToast({
							title: '无数据',
							icon: 'none'
						});
					}
				});
			},
			onShareAppMessage(res) {
				console.log(res);
				let item = this.form;
				console.log('/pages/preview/previewDetail?recruit_id=' + this.recruit_id + '&id=' + this.ID)
				return {
					path: '/pages/preview/previewDetail?recruit_id=' + this.recruit_id + '&id=' + this.ID,
					// imageUrl: '../../static/image/share.jpg',
					title: '平台认证, 诚信推荐工作！',
					// item.recruit_type_work + ' (' + item.recruit_salary + ')'
				}
				// if (res.from === 'button') { // 来自页面内分享按钮

				let id = this.form.recruit_id;


				let recId = uni.getStorageSync('userId');
				let recType = 'GG';
				console.log('pages/index/index?id=' + item.recruit_id + '&recId=' + recId + '&recType=' + recType);
				// let imgs = item.recruit_pic.filter(img => img.recruit_file_type == 'image');
				return {
					title: item.recruit_type_work + ' (' + item.recruit_salary + ')',
					// path: '/pages/talent/workDetail?id=' + item.recruit_id + '&recId=' + recId + '&recType=' + recType,
					path: 'pages/index/index?id=' + item.recruit_id + '&recId=' + recId + '&recType=' + recType,
					imageUrl: '../../static/image/share.jpg',
					success: res => {
						console.log('转发成功', res);
					},
					fail: res => {
						console.log('转发失败', res);
					}
				};
				// }
				// return {
				// 	title: '急招人',
				// 	path: 'pages/index/index'
				// }
			},
			changImg(e) {
				console.log(e);
				this.imgCurrent = e.detail.current;
				// this.getCurrentSwiperHeight('.swiper-item-content');
			},
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0] && res[0][this.imgCurrent] && res[0][this.imgCurrent].height)
						this.height = res[0][this.imgCurrent].height;
				})
			},
			chooseImg(index) {
				console.log(index);
				this.imgCurrent = index;
				// this.getCurrentSwiperHeight('.swiper-item-content');
			},
			getMap() {

				let lat = parseFloat(this.form.recruit_latitude);
				let long = parseFloat(this.form.recruit_longitude);
				uni.openLocation({
					latitude: lat,
					longitude: long,
					scale: 18
				});

			},
			onClick(e) {
				console.log(e);
				if (e.content.icon == 'home') {

				}
			},
			substring(str, len, flow = '...') {
				if (!str) return '';
				str = str.toString();
				var newStr = "",
					strLength = str.replace(/[^\x00-\xff]/g, "**").length,
					flow = typeof(flow) == 'undefined' ? '...' : flow;

				if (strLength <= len + (strLength % 2 == 0 ? 2 : 1)) return str;

				for (var i = 0, newLength = 0, singleChar; i < strLength; i++) {
					singleChar = str.charAt(i).toString();
					if (singleChar.match(/[^\x00-\xff]/g) != null) newLength += 2;
					else newLength++;

					if (newLength > len) break;
					newStr += singleChar;
				}

				if (strLength > len) newStr = newStr + flow;
				return newStr;
			},
			cutString(str, len) {
				//length属性读出来的汉字长度为1
				if (str.length * 2 <= len) {
					return str;
				}
				var strlen = 0;
				var s = "";
				for (var i = 0; i < str.length; i++) {
					s = s + str.charAt(i);
					if (str.charCodeAt(i) > 128) {
						strlen = strlen + 2;
						if (strlen >= len) {
							return s.substring(0, s.length - 1) + "...";
						}
					} else {
						strlen = strlen + 1;
						if (strlen >= len) {
							return s.substring(0, s.length - 2) + "...";
						}
					}
				}
				return s;
			},
			buttonClick(e) {
				console.log(e)
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/login'
					})
					return
				}
				if (e.content.text == '回到首页') {
					uni.switchTab({
						url: '../index/index'
					})
				} else if (e.content.text == '分享到微信开始招工') {
					uni.showToast({
						title: '不可以分享！',
						icon: 'none'
					})
					return
				} else if (e.content.text == '更多招聘信息') {
					uni.navigateBack()

				} else if (e.content.text == '一键制作招工名片') {
					if (!this.ID || !this.form.recruit_id) {
						uni.showToast({
							title: '没有分享权限！',
							icon: 'none'
						})
						return
					}
					this.$u.api.userGetCord({
						recruit_id: this.form.recruit_id,
						id: this.ID
					}).then(res => {

						if (res.status == true) {
							let content = this.cutString(this.form.recruit_requirement || '', 150) + '...';
							// var imgData = res.data.replace(/[\r\n]/g, '')
							let imgs = this.form.recruit_pic[0].images_url;
							if (this.form.recruit_pic[0].images_file_type != 'image') {
								imgs = 'https://lwfd.56ge.com.cn/static/default.jpg'
							}
							console.log(content)
							this.showCanvas = true
							this.canvasObj = {
								title: this.form.recruit_type_work,
								imgs: imgs,
								content: content,
								address: this.form.recruit_area + '   ' + this.form.recruit_address
							}
							this.codeImgs = newFileImgeUrl + res.data
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000
							});
						}
					});

				} else if (e.content.text == '报名获取联系方式') {
					if (uni.getStorageSync('role') !== 'any' || !uni.getStorageSync('role')) {
						uni.showToast({
							title: '不可以报名！',
							icon: 'none'
						})
						return
					}
					console.log(1)
					let token = uni.getStorageSync('token');
					if (token) {
						let params = {
							recruit_id: this.form.recruit_id,
							id: this.ID
						};
						this.$u.api.postReceiving(params).then(res => {
							if (res.status == true) {
								this.form.is_receiving = true;
								let userInfo = uni.getStorageSync('userInfo');
								let user = {
									receiving_uid: userInfo.id,
									avatarUrl: userInfo.avatarUrl
								}
								this.form.recruit_user.push(user)
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								this.getDetail();
							} else {
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
							}
						});
					} else {
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				} else if (e.content.text == '“获取详细代理信息”（获取联系方式）') {
					
					uni.navigateTo({
						url: '../talent/publishClaim?recruit_id=' + this.form.recruit_id
					})
				} else if (e.content.text == '已经代理该项目') {

				}
			},
			// 获取微信用户信息
			getuserinfo(e) {
				this.params.sex = e.detail.userInfo.gender;
				this.params.hidPic = e.detail.userInfo.avatarUrl;
				this.params.realName = e.detail.userInfo.nickName;
				// 获取微信openid
				this.postGetWechatOpenId();
			},
			// 获取微信openid
			postGetWechatOpenId() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						this.$u.api
							.postGetWechatOpenId({
								code: loginRes.code
							})
							.then(res => {
								console.log(res, '[登录页面-获取微信openid]');
								this.params.openId = res.data.data;
								this.params.sessionKey = res.data.sessionKey;
								uni.setStorageSync('openId', this.params.openId);
								if (!!res.data.phone) {
									// 登录
									this.postLoginCheck();
								} else {
									this.step = 2;
									uni.showToast({
										title: '请授权手机号',
										icon: 'none'
									});
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				});
			},
			// 授权手机号
			getphonenumber(e) {
				console.log(e);
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.params.encryptedData = e.detail.encryptedData;
					this.params.iv = e.detail.iv;
					// 登录
					this.postLoginCheck();
				}
			},
			// 登录
			postLoginCheck() {
				let params = {
					...this.params,
					recId: uni.getStorageSync('recId'),
					recType: uni.getStorageSync('recType')
				};
				this.$u.api
					.postLoginCheck(params)
					.then(res => {
						if (res.code == 1000) {
							this.step = 1;
							this.show = false;
							uni.setStorageSync('token', res.data);
							// 获取用户信息
							this.postGetAdminInfo().then(() => {
								uni.switchTab({
									url: './index/index'
								});
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取用户信息
			postGetAdminInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api
						.postGetAdminInfo()
						.then(res => {
							if (res.code == 1000) {
								this.$store.commit('commitMobile', res.data.mobile);
								this.$store.commit('commitUserId', res.data.id);
								uni.setStorageSync('userId', res.data.id);
							}
							resolve();
						})
						.catch(err => {
							console.log(err);
							reject();
						});
				});
			},
			closePop() {
				this.step = 1;
			}
		}
	};
</script>

<style lang="scss" scoped>
	uni-swiper {
		height: 500upx;
	}

	.larger {
		font-size: 30upx;
		font-weight: 600;
	}

	.flex {
		display: flex;
	}

	.flex-row {
		display: flex;
		justify-content: space-between;

		.row {
			font-size: 24rpx;
			font-weight: 500;
			margin-bottom: 18rpx;
		}
	}

	/deep/uni-image {
		width: 100%;
	}

	.pos-rel {
		position: relative;
	}

	.pos-abs {
		position: absolute;
	}

	.left-line {
		font-size: 30upx;
		padding-left: 30upx;
		border-left: 8upx solid greenyellow;
	}

	.work-detail {
		padding: 20rpx;

		.top-content {
			color: #ffffff;

			video {
				width: 100%;
			}
		}

		.swiper {
			min-height: 500upx;
			width: 100%;
		}

		.list-wrap {
			top: 10upx;
			left: 10upx;
			width: 96%;
			z-index: 10;

			.list-item {
				.item-title {
					justify-content: space-between;
					margin-bottom: 24rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.item-lable {
					.lable {
						margin-right: 20upx;
						padding-right: 20upx;
						border-right: 1px solid #cccccc;
					}
				}

				.item-con {
					padding-bottom: 10rpx;

					.con-row {
						display: flex;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 34rpx;
						margin-bottom: 18rpx;
					}
				}

				.light {
					margin: 0 6rpx;
				}
			}
		}

		.work-content {
			left: 10upx;
			bottom: 10upx;
			z-index: 10;
			margin-top: 40upx;
		}

		.small_img {
			// .small_item {
			margin-left: 10upx;
			margin-top: 10upx;
			margin-bottom: 20upx;
			padding: 4upx;
			width: 80upx;
			height: 80upx;
			border: 1px solid #ffffff;

			&.active {
				border: 1px solid red;
			}

			// }
		}

		.small_item {
			margin-left: 10upx;
			margin-top: 10upx;
			padding: 4upx;
			width: 80upx;
			height: 80upx;
			border: 1px solid #ffffff;

			&.active {
				border: 1px solid red;
			}
		}

		.active {
			border: 1px solid red;
		}

		.people {
			margin: 60upx 0upx;

			.imgArr {
				margin-top: 20upx;

				.headImg {
					margin-right: 20upx;
					border-radius: 50upx;
					width: 60upx;
				}
			}
		}

		.work-address {
			.address {
				justify-content: space-between;
				margin: 20upx 0;

				.info {
					width: 520upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.publish-info {
			margin: 30upx 0;

			.flex {
				margin: 30upx 0;
				padding: 30upx;
				border-radius: 20upx;
				background-color: #ddd;
				align-items: center;
			}

			.headImg {
				margin-right: 30upx;
				border-radius: 50upx;
				width: 80upx;
			}
		}

		.statement {
			margin-bottom: 100upx;

			.content {
				margin-top: 30upx;
			}

			.bottom {
				margin-top: 20upx;
				text-align: center;

				.green {
					color: greenyellow;
				}
			}
		}

		.hot-recruit {
			margin-top: 20upx;

			.recruit-item {
				margin: 30upx 0;
				border-bottom: 1px solid #ccc;

				.title {
					font-size: 30upx;
					color: #000;
				}

				.distance {
					margin-left: 20upx;
				}

				.address {
					margin-top: 10upx;
				}

				.address,
				.time_section {
					margin-left: 30upx;
				}

				.time_section {
					margin-bottom: 20upx;
				}

				.flex {
					margin-top: 10upx;
				}
			}

			.recruit-item:last-child {
				border: none;
			}

			.right {
				color: #333333;
				text-align: right;

				.authentication {
					margin-left: 50%;
					width: 80upx;
					color: #fff;
					background-color: yellow;
				}

				.time {
					margin: 20% 0;
				}

				.money {
					font-size: 30upx;
					color: greenyellow;
				}
			}

			.line {
				margin: 0 10upx;
				width: 80upx;
				border-top: 4upx solid #cccccc;
			}

			.box {
				padding: 4upx;
				border: 1px solid greenyellow;
				color: greenyellow;
			}

			.top {
				color: #ffffff;
				background-color: greenyellow;
			}
		}

		.d-login-btn {
			padding: 120rpx 40rpx 100rpx;
		}
	}

	.right-pop {
		position: fixed;
		top: 30rpx;
		right: 36rpx;
		width: 173rpx;
		background: rgba(255, 255, 255, 1);
		border: 2px solid rgba(51, 51, 51, 1);
		border-radius: 2px;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 29rpx;
		padding: 10rpx;
		z-index: 100;

		.arrow {
			position: absolute;
			width: 0;
			height: 0;
			border-left-width: 35rpx;
			border-right-width: 5rpx;
			border-bottom-width: 40rpx;
			border-color: transparent;
			border-bottom-color: #fff;
			border-style: solid;
			top: -40rpx;
			left: 36rpx;
		}

		.close {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}

		.red {
			color: red;
			font-weight: 600;
		}
	}

	.right-pop {
		position: fixed;
		top: 30rpx;
		right: 36rpx;
		width: 173rpx;
		background: rgba(255, 255, 255, 1);
		border: 2px solid rgba(51, 51, 51, 1);
		border-radius: 2px;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 29rpx;
		padding: 10rpx;
		z-index: 100;

		.arrow {
			position: absolute;
			width: 0;
			height: 0;
			border-left-width: 35rpx;
			border-right-width: 5rpx;
			border-bottom-width: 40rpx;
			border-color: transparent;
			border-bottom-color: #fff;
			border-style: solid;
			top: -40rpx;
			left: 36rpx;
		}

		.close {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}

		.red {
			color: red;
			font-weight: 600;
		}
	}

	.title-header {
		font-size: 30upx;
		padding: 0 0 20rpx 0;
		text-align: center;
		font-weight: bold;
		color: #000;
	}

	// 
	.canvas-wrap {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: auto;
		overflow: scroll;
		background: rgba($color: #000000, $alpha: .2);
		display: flex;
		z-index: 999;
	}
</style>
